<template>
<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>库存明细导航</el-breadcrumb-item>
  </el-breadcrumb>
<!-- 查询重置 -->
  <el-col :span="22"><div class="grid-content bg-purple">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="仓库查询">
        <el-select v-model="formInline.warehouseName" placeholder="全部">
          <el-option label="实仓" value="实仓"></el-option>
          <el-option label="虚仓" value="虚仓"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品查询">
        <el-input v-model="formInline.productName" placeholder="请输入商品条码/商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select v-model="formInline.productModel" placeholder="全部">
          <el-option label="良品" value="良品"></el-option>
          <el-option label="次品" value="次品"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div></el-col>
  <el-col :span="2"><div class="grid-content bg-purple">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="onSubmit" >查询</el-button>
      </el-form-item>
    </el-form>
  </div></el-col><!-- 查询 -->
  <el-col :span="22"><div class="grid-content bg-purple">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="商品状态">
      <el-select v-model="formInline.spstate" placeholder="全部">
        <el-option label="待入库" value="待入库"></el-option>
        <el-option label="待分拣" value="待分拣"></el-option>
        <el-option label="部分入库" value="部分入库"></el-option>
        <el-option label="完全入库" value="完全入库"></el-option>
      </el-select>
    </el-form-item>
    </el-form>
  </div></el-col>
  <el-col :span="2"><div class="grid-content bg-purple">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div></el-col><!-- 重置 -->
  <!-- 表格 -->
  <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="storageDate" label="入仓时间" width="300">
        <template slot-scope="scope">
          <div>{{scope.row.storageDate|timestampToTime}}</div>
        </template>
      </el-table-column>
    <el-table-column sortable prop="outboundNo" label="出库单号" width="300"></el-table-column>
    <el-table-column sortable prop="uniqueCode" label="唯一码" width="300"></el-table-column>
    <el-table-column sortable prop="warehouseName" label="仓库名称" width="300"></el-table-column>
    <el-table-column sortable prop="shelfCode" label="货架编码" width="300"></el-table-column>
    <el-table-column sortable prop="productName" label="商品名称" width="300"></el-table-column>
    <el-table-column sortable prop="productImage" label="商品图片" width="300">
      <template slot-scope="scope">
        <image src="scope.row.productImage"/>
      </template>
    </el-table-column>
    <el-table-column sortable prop="productModel" label="商品类型" width="300"></el-table-column>
    <el-table-column sortable prop="productCode" label="商品货号" width="300"></el-table-column>
    <el-table-column sortable prop="productSize" label="商品尺寸" width="300"></el-table-column>
    <el-table-column sortable prop="updateTime" label="更新时间" width="300">
      <template slot-scope="scope">
        <div>{{scope.row.updateTime|timestampToTime}}</div>
      </template></el-table-column>
    <el-table-column align="center" label="操作" min-width="300">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" >唯一码</el-button>
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <Pagination v-bind:child-msg="pageparam" v-model="pageparam" @callFather="callFather"></Pagination>
  <!-- 编辑界面
      :model="editForm"  绑定表单数据
       :rules="rules"    绑定数据校验规则
    -->
  <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
    <el-form label-width="120px" :model="editForm"  ref="editForm">
      <el-form-item label="商品类型" prop="productModel">
      <el-input  v-model="editForm.productModel" :disabled="true" placeholder=editForm.productModel ></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select v-model="editForm.productModel" placeholder="全部">
          <el-option label="良品" value="良品"></el-option>
          <el-option label="次品" value="次品"></el-option>
        </el-select>
      </el-form-item>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialog">取消</el-button>
      <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
    </div>
  </el-dialog>


</div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {inventoryEdit, inventoryList} from "../../api/inventoryMG";

export default {
  name: "inventory",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,//图片上传
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '编辑',
  //下拉栏信息
      formInline: {
        pageNum: 1,
        pageSize: 10,
        spstate:'',
        productName:'',
        warehouseName: '',
        productModel:'',
      },
      editForm:{
        productModel:'',
        updateTime:''
      },//编辑对象
      listData: [], //用户数据
      pageparam: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }, // 分页参数
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 创建完毕   初始化数据 最好 在mounted初始
   */
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },//图片上传
    submitForm(editForm) {
      // 点击提交按钮会校验输入框
      this.$refs[editForm].validate((valid) => {
        // 如果校验通过再发请求
        if (valid) {
          if (this.title = "编辑") {
            console.log(this.editForm)
            inventoryEdit(this.editForm).then(res => {
              if (res.code = 20000) {
                this.editFormVisible = false;
                this.$message.success({
                  message: '用户更新成功',
                  duration: 500
                })
                this.getdata(this.formInline)
              } else {
                this.$message.error({
                  message: '用户更新失败',
                  duration: 500
                })
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    closeDialog() {
      this.editFormVisible = false;
      this.getdata(this.formInline)
    },//取消按钮
    getdata(formInline) {
      console.log(formInline)
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      inventoryList(formInline)
        .then(res => {  // 后端响应
          this.loading = false
          if (res.code != 20000) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            const pageInfo = res.data;  //先得到pageInfo   (pageHelper 中的分页信息)
            this.listData = pageInfo.list;
            // 分页赋值
            this.pageparam.currentPage = this.formInline.pageNum
            this.pageparam.pageSize = this.formInline.pageSize
            this.pageparam.total = pageInfo.total
            console.log(this.pageparam)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户信息加载失败，请稍后再试！')
        })
    },//刷新页面
    onSubmit() {
      console.log('submit!');
      this.getdata(this.formInline)
    },//查询
    resetForm() {
      this.formInline.productName='';
      this.formInline.warehouseName='';
      this.formInline.productModel='';
      this.formInline.spstate='';
      this.getdata(this.formInline)
    },//重置
    callFather(pageparam) {
      this.formInline.pageNum = pageparam.pageNum;
      this.formInline.pageSize = pageparam.pageSize;
      this.getdata(this.formInline)
    },//分页
    handleEdit(index, rowData) {
      // console.log(index,rowData)
      this.title = "编辑"
      this.editForm = rowData;
      this.editFormVisible = true;
    },//编辑
  }
}

</script>

<style scoped>
.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 3px;
  min-height: 36px;
}
</style>
